<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>txt数据请求</title>
	</head>
	
	<body>
		点击按钮获得info.txt的数据(异步请求) <br>
		<button id="btn_as">请求信息</button><br>
		获得的信息：<span id="ascontent"></span>
		
		<script type="text/javascript">
			document.getElementById("btn_as").onclick = () =>{
				var xhr = new XMLHttpRequest();
				xhr.open("GET","info.txt");
				xhr.send();
				xhr.onreadystatechange = function(){
					if (xhr.readyState==4 && xhr.status==200){
						var date = xhr.responseText
						document.getElementById("ascontent").innerHTML = date;
						document.getElementById("ascontent").style.color = "red"
					}
				}
			}
		</script>
		<hr>
		点击按钮获得info.txt的数据(同步请求) <br>
		<button id="btn_sy">请求信息</button><br>
		获得的信息：<span id="sycontent"></span>
		
		<script type="text/javascript">
			document.getElementById("btn_sy").onclick = () =>{
				var xhr = new XMLHttpRequest();
				xhr.open("GET","info.txt",false);
				xhr.send();
				var date = xhr.responseText
				document.getElementById("sycontent").innerHTML = date;
				document.getElementById("sycontent").style.color = "red"
			}
		</script>
	</body>
</html>
